<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    canvas.width = innerWidth;
    canvas.height = innerHeight;

    window.addEventListener('resize', function() {
        canvas.width = innerWidth;
        canvas.height = innerHeight;
        centerX = innerWidth / 2;
        centerY = innerHeight / 2;
    })

    var centerX = innerWidth / 2,
            centerY = innerHeight / 2,
            x, y, r = 0,
            m = 1,
            l = 80;

    function animate() {
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
        ctx.fillRect(0, 0, innerWidth, innerHeight);

        r = r < 360 ? r + 2 : 0;
        x = centerX + Math.cos((Math.PI * 2) * (r / 360) - Math.PI / 3) * l;
        y = centerY - Math.sin((Math.PI * 2) * (r / 360)) * l;

        ctx.globalCompositeOperation = 'multiply';
        ctx.shadowColor = '#00f';
        ctx.shadowBlur = 30;
        ctx.fillStyle = '#f00'
        ctx.beginPath();
        ctx.arc(x, y, 30, 0, Math.PI * 2);
        ctx.fill()

        window.requestAnimationFrame(animate);
    }

    animate();
</script>